import { useEffect } from 'react';

export function ViewOrder({ callBack, formData }) {
  

  return (
    <div className="form-container">
      <form className="payment-form">
        {/* Payment Details 部分 */}
        <h3>PAYMENT DETAILS</h3>
        <div className="form-group">
          <label>Card Type:</label>
          <select
            name="cardType"
            value={formData.cardtype}
            disabled
          >
            <option value="Visa">Visa</option>
            <option value="MasterCard">MasterCard</option>
            <option value="Amex">Amex</option>
          </select>
        </div>
        <div className="form-group">
          <label>Card Number:</label>
          <input
            type="text"
            name="cardNumber"
            value={formData.creditcard}
            disabled
            placeholder="Enter card number"
          />
        </div>
        <div className="form-group">
          <label>Expiry Date (MM/YYYY):</label>
          <input
            type="text"
            name="expiryDate"
            value={formData.expirydate}
            disabled
            placeholder="MM/YYYY"
          />
        </div>

        {/* Billing Address 部分 */}
        <h3>BILLING ADDRESS</h3>
        <div className="form-group">
          <label>First name:</label>
          <input
            type="text"
            name="billFirstName"
            value={formData.billtofirstname}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Last name:</label>
          <input
            type="text"
            name="billLastName"
            value={formData.billtolastname}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Address 1:</label>
          <input
            type="text"
            name="billAddress1"
            value={formData.billaddr1}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Address 2:</label>
          <input
            type="text"
            name="billAddress2"
            value={formData.billaddr2}
            disabled
          />
        </div>
        <div className="form-group">
          <label>City:</label>
          <input
            type="text"
            name="billCity"
            value={formData.billcity}
            disabled
          />
        </div>
        <div className="form-group">
          <label>State:</label>
          <input
            type="text"
            name="billState"
            value={formData.billstate}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Zip:</label>
          <input
            type="text"
            name="billZip"
            value={formData.billzip}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Country:</label>
          <input
            type="text"
            name="billCountry"
            value={formData.billcountry}
            disabled
          />
        </div>

        {/* Shipping Address 部分 */}
        <h3>SHIPPING ADDRESS</h3>
        <div className="form-group">
          <label>First name:</label>
          <input
            type="text"
            name="shipFirstName"
            value={formData.shiptofirstname}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Last name:</label>
          <input
            type="text"
            name="shipLastName"
            value={formData.shiptolastname}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Address 1:</label>
          <input
            type="text"
            name="shipAddress1"
            value={formData.shipaddr1}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Address 2:</label>
          <input
            type="text"
            name="shipAddress2"
            value={formData.shipaddr2}
            disabled
          />
        </div>
        <div className="form-group">
          <label>City:</label>
          <input
            type="text"
            name="shipCity"
            value={formData.shipcity}
            disabled
          />
        </div>
        <div className="form-group">
          <label>State:</label>
          <input
            type="text"
            name="shipState"
            value={formData.shipstate}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Zip:</label>
          <input
            type="text"
            name="shipZip"
            value={formData.shipzip}
            disabled
          />
        </div>
        <div className="form-group">
          <label>Country:</label>
          <input
            type="text"
            name="shipCountry"
            value={formData.shipcountry}
            disabled
          />
        </div>

       
      </form>
    </div>
  );
}